<template>
  <div class="column-detail-page w-75 mx-auto">
    <div
      class="column-info row mb-4 border-bottom pb-4 align-items-center"
      v-if="column"
    >
      <div class="col-3 text-center">
        <img
          v-if="column.avatar"
          :src="column.avatar && column.avatar.url"
          :alt="column.title"
          class="rounded-circle border w-60"
        />
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
        <p class="text-muted">{{ column.description }}</p>
      </div>
    </div>
    <post-list :list="list"></post-list>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { computed, onMounted, ref } from "vue";
import PostList from "@/components/PostList.vue";
import { ColumnProps } from "@/store";
import { generateFitUrl } from "@/util/helper";
const store = useStore();
const route = useRoute();
const currentId = route.params.id;

const column = ref({});
onMounted(() => {
  store.dispatch("fetchColumn", currentId).then((res) => {
    console.log(res);
    column.value = res;
  });
  store.dispatch("fetchPosts", currentId);
});
// const column = computed(() => {
//   const selectColumn = store.getters.getColumnById(currentId) as ColumnProps;
//   if (selectColumn) {
//     generateFitUrl(selectColumn, 100, 100);
//   }
//   return selectColumn;
// });

const list = computed(() => store.getters.getPostsByCid(currentId));
</script>

<style scoped></style>
